<!-- 
  我的 -> 控制器信息
 -->

<template>
  <view class="page-root">
    <view class="list-container">
      <view class="list-item">
        <view class="list-label">
          <text v-if="lang">Controller mode</text>
          <text v-else>控制器模式</text>
        </view>
        <view class="list-content ell1">xxxxxxx</view>
      </view>
      <view class="list-item">
        <view class="list-label">
          <text v-if="lang">Hardware version</text>
          <text v-else>硬件版本</text>
        </view>
        <view class="list-content ell1">xxxxxxx</view>
      </view>
      <view class="list-item">
        <view class="list-label">
          <text v-if="lang">Software Version</text>
          <text v-else>软件版本</text>
        </view>
        <view class="list-content ell1">xxxxxxx</view>
      </view>
      <view class="list-item">
        <view class="list-label">
          <text v-if="lang">Serial number</text>
          <text v-else>序列号</text>
        </view>
        <view class="list-content ell1">xxxxxxxxxxxxxxxxxxxxxxxxxxxx</view>
      </view>
      <view class="list-item">
        <view class="list-label">
          <text v-if="lang">QR code</text>
          <text v-else>二维码</text>
        </view>
        <image class="qr-code" src="/static/qrcode.png" @click="handleViewQrCode"></image>
      </view>
      <view class="list-item">
        <view class="list-label">
          <text v-if="lang">Product ID</text>
          <text v-else>产品ID</text>
        </view>
        <view class="list-content ell1">xxxxxxx</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      lang: 0, // 0=中文 1=英文
    };
  },
  onShow() {
    this.lang = uni.getStorageSync("lang");
    if (this.lang) {
      uni.setNavigationBarTitle({ title: "Controller information" });
    } else {
      uni.setNavigationBarTitle({ title: "控制器信息" });
    }
  },
  methods: {
    handleViewQrCode() {
      wx.showShareImageMenu({
        path: "/static/qrcode.png",
      });
    },
  },
};
</script>

<style>
page {
  background: #19253e;
}
</style>

<style lang="scss" scoped>
.page-root {
  padding-bottom: 20rpx;
  color: #fff;
}

.list-container {
  margin: 30rpx;
  padding: 0 20rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10rpx;
  .list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    & + .list-item {
      border-top: 2rpx solid rgba(255, 255, 255, 0.2);
    }
  }
  .list-content {
    width: 280rpx;
    height: 56rpx;
    line-height: 56rpx;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
  }
  .qr-code {
    width: 64rpx;
    height: 64rpx;
  }
}
</style>
